<template>
  <el-collapse v-model="activeName" accordion class="clear">
    <el-collapse-item title="筛选查询" name="1" style="font-size: 20px">
      <div id="one" class="clear">
        <span>最近消费:</span>
        <div><el-button class="wenzi">不限</el-button></div>
        <div>1周内</div>
        <div>2周内</div>
        <div>1个月内</div>
        <div>1个月前</div>
        <div>两个月前</div>
        <div>3个月前</div>
        <div>6个月前</div>
        <div><el-button class="wenzi" @click="dialogVisible = true">自定义</el-button></div>
      </div>
      <div id="two" class="clear">
        <span>消费次数:</span>
        <div><el-button class="wenzi">不限</el-button></div>
        <div>1次以上</div>
        <div>2次以上</div>
        <div>3次以上</div>
        <div>5次以上</div>
        <div>10次以上</div>
        <div>20次以上</div>
        <div>30次以上</div>
        <div><el-button class="wenzi" @click="dialogVisible = true">自定义</el-button></div>
      </div>
      <div id="three" class="clear">
        <span>消费金额:</span>
        <div><el-button class="wenzi">不限</el-button></div>
        <div>0-50</div>
        <div>51-100</div>
        <div>101-200</div>
        <div>201-500</div>
        <div>501-1000</div>
        <div>1001-2000</div>
        <div>2000以上</div>
        <div><el-button class="wenzi" @click="dialogVisible = true">自定义</el-button></div>
      </div>
      <div id="four" class="clear">
        <span>订单均价:</span>
        <div><el-button class="wenzi">不限</el-button></div>
        <div>0-50</div>
        <div>51-100</div>
        <div>101-200</div>
        <div>201-500</div>
        <div>501-1000</div>
        <div>1001-2000</div>
        <div>2000以上</div>
        <div><el-button class="wenzi" @click="dialogVisible = true">自定义</el-button></div>
      </div>
      <div id="five" class="clear">
        <span>用户标签:</span>
        <div><el-button class="wenzi">不限</el-button></div>
        <div>标签名称1</div>
        <div>标签名称2</div>
        <div>标签名称3</div>
        <div>标签名称4</div>
        <div>标签名称5</div>
        <div>标签名称6</div>
        <div>标签名称7</div>
      </div>
    </el-collapse-item>
    <div id="content">
      <div id="lableshuju"><span>数据列表</span></div>
      <!-- 设置导出按钮 -->
      <el-row>
        <el-button id="daochu" @click="exportXLSX">导出</el-button>
        <el-button @click="biaoqian" id="biaoqian">设置标签</el-button>
        <div id="paixu" class="clear">
          <!-- 排序方式 -->
          <span>排序方式</span>
          <el-select v-model="value" placeholder="排序方式">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-row>
      <!-- 表格 -->
      <el-table
       id="exportTab"
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"

      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="用户昵称" min-width="15%">
        </el-table-column>
        <el-table-column prop="zhanghao" label="用户账号" min-width="15%">
        </el-table-column>
        <el-table-column prop="xiaofei" label="消费金额" min-width="15%">
        </el-table-column>
        <el-table-column prop="cishu" label="消费次数" min-width="15%">
        </el-table-column>
        <el-table-column prop="junjia" label="订单均价" min-width="15%">
        </el-table-column>
        <el-table-column prop="time" label="最近购买时间" min-width="15%">
        </el-table-column>
        <el-table-column label="操作" min-width="15%">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fenye">
        <span class="demonstration"></span>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-sizes="[7,14]"
          :page-size="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalData.length"
        >
        </el-pagination>
      </div>

        <!-- 查看信息表-->
        <div>
          <el-dialog
            title="购买力筛选详情"
            :visible.sync="CheckDialogVisible"
            width="50%">
            <el-form
              ref="editTableData"
              :model="editTableData"
              label-width="200px"
            >
              <el-form-item prop="name" label="用户昵称" >
                <el-input v-model="editTableData.name" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="zhanghao" label="用户账号">
                <el-input v-model="editTableData.zhanghao" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="xiaofei" label="消费金额">
                <el-input v-model="editTableData.xiaofei" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="cishu" label="消费次数">
                <el-input v-model="editTableData.cishu" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="junjia" label="订单均价">
                <el-input v-model="editTableData.junjia" width="200" disabled></el-input>
              </el-form-item>
              <el-form-item prop="time" label="最近购买时间">
                <el-input v-model="editTableData.time" width="200" disabled></el-input>
              </el-form-item>
            </el-form>
                  <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onEditOk">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 设置标签 -->
         <div>
          <el-dialog
            title="设置标签"
            :visible.sync="CheckBiaoqian"
            width="50%">
            <el-form
              ref="setData"
              label-width="200px">
              <el-form-item prop="1" label="1" class="tag">
                 <el-checkbox v-model="checked1">用户标签1</el-checkbox>
              </el-form-item>
                <el-form-item prop="2" label="2" class="tag">
                 <el-checkbox v-model="checked2">用户标签2</el-checkbox>
              </el-form-item>
               <el-form-item prop="3" label="3" class="tag">
                 <el-checkbox v-model="checked3">用户标签3</el-checkbox>
              </el-form-item>
                <el-form-item prop="4" label="4" class="tag">
                 <el-checkbox v-model="checked4">用户标签4</el-checkbox>
              </el-form-item>
                <el-form-item prop="5" label="5" class="tag">
                 <el-checkbox v-model="checked5">用户标签5</el-checkbox>
              </el-form-item>
                <el-form-item prop="6" label="6" class="tag">
                 <el-checkbox v-model="checked6">用户标签6</el-checkbox>
              </el-form-item>
                <el-form-item prop="7" label="7" class="tag">
                 <el-checkbox v-model="checked7">用户标签7</el-checkbox>
              </el-form-item>
                <el-form-item prop="8" label="8" class="tag">
                 <el-checkbox v-model="checked8">用户标签8</el-checkbox>
              </el-form-item>
                <el-form-item prop="9" label="9" class="tag">
                 <el-checkbox v-model="checked9">用户标签9</el-checkbox>
              </el-form-item>
                <el-form-item prop="10" label="10" class="tag">
                 <el-checkbox v-model="checked10">用户标签10</el-checkbox>
              </el-form-item>
            </el-form>
            
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="editClose">取 消</el-button>
              <el-button type="primary" @click="Setbiaoqian">确 定</el-button>
            </span>
          </el-dialog>
        </div>
         <!-- 自定义 -->

            <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <span>
                <div class="block">
                <span class="demonstration">请选择日期</span>
                <el-date-picker
                    v-model="value10"
                    type="daterange"
                    range-separator="到"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                </div>
                </span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
        </el-dialog>
    </div>
  </el-collapse>
</template>
<script>
// 导出
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  data() {
    return {
      totalData:[],
      nowPage: 1,
      count: 7,
      activeName: "1",
      CheckBiaoqian: false,
      CheckDialogVisible: false,
      editTableData:{
        name: "",
        zhanghao: "",
        xiaofei: "",
        cishu: "",
        junjia: "",
        time: "",
      },

       value10: '',
       dialogVisible: false,
      // 设置标签
   
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      checked5: true,
      checked6: true,
      checked7: true,
      checked8: false,
      checked9: false,
      checked10: false,
      // 下拉列表
      options: [
        {
          value: "选项1",
          label: "按消费金额倒序",
        },
        {
          value: "选项2",
          label: "按消费金额顺序",
        },
        {
          value: "选项3",
          label: "按消费次数倒序",
        },
        {
          value: "选项4",
          label: "按消费次数顺序",
        },
        {
          value: "选项5",
          label: "按订单均价倒序",
        },
        {
          value: "选项6",
          label: "按订单均价顺序",
        },
        {
          value: "选项7",
          label: "按最近购买时间顺序",
        },
      ],
      value: "",
 
    };
  },
    mounted() {
        this.getUserPower();
    },
  methods: {
      // 自定义
      handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 页码
    handleClick(row) {
      console.log(row);
    },
      handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.nowPage=val;
  },

  // 从数据库获取数据
   getUserPower() {
          // console.log("获取数据");
          this.$axios({
              url: "/user_list/getpower",
          }).then((res) => {
              this.totalData = res.data.data;
              console.log(res.data.data);
              
          });
      },

       // 查看数据
    
    handleClick(data) {
      this.CheckDialogVisible = true;
      console.log(data);
      this.editTableData = data;
    },
    onEditOk() {
      this.$axios({
        url: "/user_list/SeePower",
        data: {
          name: this.editTableData.name,
          zhanghao: this.editTableData.zhanghao,
          xiaofei: this.editTableData.xiaofei,
          cishu: this.editTableData.cishu,
          junjia: this.editTableData.junjia,
          time: this.editTableData.time,
        },
        method: "post",
      }).then((res) => {
        this.editTableData = res.data.data;
        console.log(res);
        if (res.data.code == 200) {
          this.$message("查看表数据成功！", "success");
          this.CheckDialogVisible = false;
        }
      });
    },

    // 标签设置
    biaoqian(data){
      this.CheckBiaoqian = true;
      this.editTableData = data;
    },
    editClose() {
      this.CheckBiaoqian= false;
    },
    Setbiaoqian(){
         this.$axios({
         url: "/user_list/SeePower",
        method: "post",
      }).then((res) => {
        this.editTableData= res.data.data;
        console.log(res);
        if (res.data.code == 200) {
          this.$message("设置标签成功！", "success");
          this.CheckBiaoqian = false;
        }
      });
    },
    // 导出
    exportXLSX  () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)
 
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '购买力筛选.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
},
  },
        computed: {
        tableData() {
            return this.totalData.slice(
                (this.nowPage - 1) * this.count,
                this.nowPage * this.count
            );
        },
    },
 

};
</script>
<style lang="less" scoped>
::after {
  content: "";
  display: block;
  clear: both;
}
.el-table[data-v-f915c258]{
  margin: 0;
}
/deep/.el-collapse-item__header {
  font-size: 20px;
}
#one > span,
#one > div {
  float: left;
  width: 8%;
  font-size: 16px;
}
#two > span,
#two > div {
  float: left;
  width: 8%; font-size: 16px;
}
#three > span,
#three > div {
  float: left;
  width: 8%; font-size: 16px;
}
#four > span,
#four > div {
  float: left;
  width: 8%; font-size: 16px;
}
#five > span,
#five > div {
  float: left;
  width: 8%; font-size: 16px;
}
#one > div,
#two > div,
#three > div,
#four > div,
#five > div {
  margin: 0 5px;
  padding: 0 5px;
  font-size: 16px;
}
#paixu {
  float: right;
  margin: 20px 10px;
}
#paixu > span {
  float: left;
  line-height: 40px;
  margin: 0 10px;
}
#biaoqian,
#daochu {
  float: right;
  margin: 20px 10px;
}
#lableshuju{
  float: left;
  font-size: 20px;
  margin-top: 20px;
}

.fenye {
  text-align: center;
  margin: 20px 0;
}
#content{
  background-color: rgb(242, 242, 242);
}
.tag{
  padding:0 20px;
  float: left;
}
</style>
<style lang="less" scoped>
/* .el-main{
  overflow-y: hidden;
} */
/deep/.el-main {
  overflow: visible;
}
/deep/.el-collapse-item__header {
  font-size: 20px;
  background-color: rgb(242, 242, 242);
}
.el-collapse-item div {
  margin: 10px 0;
}
.el-table {
  margin: 20px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
  color: black;
  font-weight: 500;
}
/deep/.el-table .cell {
  text-align: center;
}
.el-main{
  box-sizing: border-box;
}
.wenzi{
  border: none;
  padding: 0;
  margin: 0;
  color: rgb(64,158,255);
}
</style>
